<template>
  <div class="excel">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
    <el-form-item label="数据源名称" prop="name">
        <el-input v-model="ruleForm.name" @input="changeName"></el-input>
    </el-form-item>
    <el-form-item label="csv地址" prop="src">
        <el-upload
            class="upload-demo"
            drag
            action="https://jsonplaceholder.typicode.com/posts/"
            multiple>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            
    </el-upload>
    </el-form-item>
    <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
    </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  // name: 'excel',
  // props: {
  //     childname: {
  //         type: Object,
  //         default: {}
  //     }
  // },
   data () {
    return {
        childname:{},
       rules: {
        name: [
            { required: true, message: '请输入数据源名称', trigger: 'blur' },
            
          ],
          src: [
            { required: true, message: '请上传文件', trigger: 'blur' },
            
          ],
      },
      ruleForm:{
        name:this.$store.state.formType.name,
        src:'',
      },
    }
  },
  mounted(){
    this.initData()
  },
  methods:{
    initData(){
      console.log(this.childname);
      this.childname=this.$store.state.formType
      if(this.childname.id){
         this.ruleForm.id=this.childname.id
      }
      this.ruleForm.conName=this.childname.conName
    },
      submitForm(formName){
       this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
            this.$emit('childevent',true);
          } else {
            console.log('error submit!!');
            return false;
          }
        });
   },
    changeName(e){
        console.log(e);
        this.$store.state.formType.name=e;
        this.$emit('childevent',e);
      }
  }
}
</script>

<style>
.excel{
    width: 60%;
}
</style>